<template>
  <div class="dialogBox">
    <el-input
      :style="{ width: width }"
      :size="size"
      v-if="isShow"
      v-model="selectionLabel"
      :placeholder="placeholder"
      suffix-icon="el-icon-search"
      :disabled="openDisabled"
      :readonly="true"
      @focus="dialogTableVisible = true"
    >
    </el-input>
    <el-dialog
      v-myFullscreen
      title="数据列表"
      append-to-body
      :visible.sync="dialogTableVisible"
      custom-class="dLog"
      width="1000px"
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="search != ''"
        label-width="90"
      >
        <el-form-item
          :label="items.label"
          :prop="items.prop"
          v-for="(items, indexs) in searchCriteria"
          :key="indexs + items.label"
          v-show="!items.options"
        >
          <el-input
            v-model="queryParams[items.prop]"
            :placeholder="'请输入' + items.label"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item
          :label="items.label"
          :prop="items.prop"
          v-for="(items, indexs) in searchCriteria"
          :key="indexs + items.label + 1"
          v-show="items.options"
        >
          <el-select
            v-model="queryParams[items.prop]"
            :placeholder="items.label"
            clearable
            size="small"
          >
            <el-option
              v-for="(item, index) in items.options"
              :key="index + item.dictLabel + 1"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          > -->
        </el-form-item>
      </el-form>
      <LbTableLog
        v-if="multiple == false || multiple == 'false'"
        v-loading="loading"
        ref="lbTable"
        highlight-current-row
        pagination
        cell-class-name="li_table"
        max-height="400"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :current-page.sync="queryParams.pageNum"
        :total="queryParams.total"
        :page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        :tree-props="{ children: 'children' }"
        :tableData="tableData"
        @p-current-change="handleCurrentChange($event)"
        @current-change="selectionChange"
      >
      </LbTableLog>
      <LbTableLog
        v-if="multiple == true || multiple == 'true'"
        v-loading="loading"
        ref="multipleTable"
        highlight-current-row
        pagination
        max-height="400"
        background
        :tree-props="{ children: 'children' }"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :current-page.sync="queryParams.pageNum"
        :total="queryParams.total"
        :page-size="queryParams.pageSize"
        @size-change="handleSizeChange"
        :tableData="tableData"
        @p-current-change="handleCurrentChange($event)"
        @selection-change="selectionChange($event)"
        @select="select"
        @select-all="selectAll"
      >
      </LbTableLog>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" :disabled="disabled"
          >确 定</el-button
        >
        <el-button @click="dialogTableVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, listPost } from "@/api/dialog/index";
import LbTableLog from "@/components/table/lb-table/lb-table-log.vue";
export default {
  components: {
    LbTableLog,
  },
  props: {
    url: String,
    value: String,
    label: String,
    echoValue: String | Number,
    column: Array | Object,
    search: {
      //搜索的参数
      type: String,
      default: "",
    },
    pageSizes: {
      //请求参数
      type: [Object,Array],
      default: () => [20],
    },
    multiple: {
      //是否可多选
      type: Boolean | String,
      default: false,
    },
    openDisabled: {
      //是否禁用
      type: Boolean | String,
      default: false,
    },
    isShow: {
      //输入框是否显示
      type: Boolean | String,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    parameter: {
      type: String,
      default: "rows",
    },
    method: {
      //请求类型
      type: String,
      default: "get",
    },
    contentType: {
      //请求类型
      type: String,
      default: "json",
    },
    axiosData: {
      //请求参数
      type: Object | Array,
      default: () => {},
    },
    width: {
      type: String,
      default: "100%",
    },
    size: {
      type: String,
      default: "small",
    },
  },
  watch: {
    echoValue: function (newVal, oldVal) {
      this.selectionLabel = this.echoValue;
    },
    dialogTableVisible: function (newVal, oldVal) {
      if (this.dialogTableVisible == true) {
        this.queryParams.pageNum = 1;
        if (this.multiple == true || this.multiple == "true") {
          this.tableData.column = [
            {
              type: "selection",
            },
          ];
        } else {
          this.tableData.column = [];
        }
        this.arr = [];
        this.loading = true;
        for (let items of this.column) {
          let split = items.split("/");
          let object = {};
          object.label = split[0];

          if (split[1] == "查看") {
            object.render = (h, scope) => {
              return (
                <div>
                  <el-button
                    size="mini"
                    onClick={() => {
                      this.handleLook(scope.$index, scope.row);
                    }}
                  >
                    {split[1]}
                  </el-button>
                </div>
              );
            };
          } else {
            object.prop = split[1];
          }

          if (split.length <= 2) {
            this.arr.push(object);
          }
          if (split.length > 2) {
            this.getDicts(split[2]).then((response) => {
              object.options = response.data;
              this.arr.push(object);
            });
          }
        }
        window.clearTimeout(timer);
        var timer = window.setTimeout(() => {
          this.searchCriteria = [];
          this.tableData.column.push(...this.arr);
          let searchArr = this.search.split("/");
          for (let items of searchArr) {
            for (let item of this.arr) {
              if (item.prop == items) {
                this.searchCriteria.push(item);
              }
            }
          }
          for (let item of this.tableData.column) {
            item.align = "center";
          }
          this.getList();
          if (this.multiple == true || this.multiple == "true") {
            this.selectList = [];
          } else {
            this.selectList = {};
          }
          this.disabled = true;
        }, 1000);
      }
    },
    // 是否禁用
    selectList(val) {
      try {
        if (this.multiple == true || this.multiple == "true") {
          if (this.selectList.length == 0) {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        } else {
          if (JSON.stringify(this.selectList) == "{}") {
            this.disabled = true;
          } else {
            this.disabled = false;
          }
        }
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  
  },
  data() {
    return {
      // 是否禁用
      disabled: false,
      // 是否加载
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 弹窗是否显示
      dialogTableVisible: false,
      // 表格数据
      tableData: {
        column: [],
        data: [],
      },
      // 搜索条件
      searchCriteria: [],
      // 查询参数
      queryParams: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      },
      //选择的数据
      selectList: null,
      //处理的数据
      arr: [],
      //选择后处理的对象
      selection: {
        value: null,
        label: null,
        options: null,
      },
      selectionLabel: "",
    };
  },
  created() {
    this.selectionLabel = this.echoValue;
  },
  methods: {
      //查看
    handleLook(index, row) {
      console.log(index, row);
    },
    //选择
    selectionChange(val) {
      if (val instanceof Array == true) {
        for (let item of val) {
          item.pageNum = this.queryParams.pageNum;
        }
        this.selectList.push(...val);
        this.selectList = this.deWeightThree(this.selectList);
      } else {
        if (val != null) {
          this.selectList = val;
        }
      }
    },
    select(selection, row) {
      let temp = 0;
      if (selection instanceof Array == true) {
        if (this.selectList.length > 0) {
          for (let index in this.selectList) {
            if (this.selectList[index][this.value] == row[this.value]) {
              this.selectList.splice(index, 1);
              temp++;
            }
          }
          if (temp == 0) {
            row.pageNum = this.queryParams.pageNum;
            this.selectList.push(row);
          }
        }
      }
      //  console.log(this.selectList)
    },
    selectAll(selection) {
      if (selection.length == 0) {
        this.selectList = this.selectList.filter(
          (item) => item.pageNum !== this.queryParams.pageNum
        );
      }
    },
    deWeightThree(arr) {
      let arr1 = []; //存id
      let newArr = []; //存新数组
      for (let i in arr) {
        if (arr1.indexOf(arr[i][this.value]) == -1) {
          arr1.push(arr[i][this.value]);
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      let queryParams = Object.assign(this.queryParams, this.axiosData);
      // if (this.method == "get") {
      list(this.url, queryParams, this.method, this.contentType).then(
        (response) => {
          this.tableData.data = response[this.parameter];
          this.queryParams.total = response.total;
          this.loading = false;
          // console.log(response)
          if (this.multiple == true || this.multiple == "true") {
            let hasIdArr = [];
            let list = [];
            this.selectList.forEach((item) => hasIdArr.push(item[this.value]));
            this.tableData.data.forEach((item) => {
              hasIdArr.includes(item[this.value]) && list.push(item);
            });
            clearTimeout(settimeout);
            var settimeout = setTimeout(() => {
              list.forEach((item) => {
                this.$refs.multipleTable.toggleRowSelection(item);
              });
            }, 100);
          } else {
            this.selectList = {};
          }
        }
      );
      // } else {
      //   listPost(this.url, queryParams).then((response) => {
      //     this.tableData.data = response[this.parameter];
      //     this.queryParams.total = response.total;
      //     this.loading = false;
      //     if (this.multiple == true || this.multiple == "true") {
      //       let hasIdArr = [];
      //       let list = [];
      //       this.selectList.forEach((item) => hasIdArr.push(item[this.value]));
      //       this.tableData.data.forEach((item) => {
      //         hasIdArr.includes(item[this.value]) && list.push(item);
      //       });
      //       clearTimeout(settimeout);
      //       var settimeout = setTimeout(() => {
      //         list.forEach((item) => {
      //           this.$refs.multipleTable.toggleRowSelection(item);
      //         });
      //       }, 100);
      //     }
      //   });
      // }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    setCurrent(row) {
      this.$refs.lbTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    submit(e) {
      let value = this.value;
      let label = this.label;

      if (this.multiple == true || this.multiple == "true") {
        this.selection.options = new Array();
        this.selection.value = new Array();
        this.selection.label = new Array();
        for (let j of this.selectList) {
          let obj = new Object();
          obj.value = j[value];
          obj.label = j[label];
          this.selection.options.push(j);
          this.selection.value.push(j[value]);
          this.selection.label.push(j[label]);
        }
        let selection = JSON.parse(JSON.stringify(this.selection));
        selection.label = selection.label.toString();
        selection.value = selection.value.toString();
        this.selectionLabel = selection.label;
        this.$emit("dialogChange", selection);
        this.dialogTableVisible = false;
      }
      if (this.multiple == false || this.multiple == "false") {
        this.selection.options = new Object();
        this.selection.value = new Object();
        this.selection.label = new Object();
        this.selection.options = this.selectList;
        this.selection.value = this.selectList[value];
        this.selection.label = this.selectList[label];
        this.selectionLabel = this.selection.label;
        // console.log(this.selectionLabel);
        this.$emit("dialogChange", this.selection);
        this.dialogTableVisible = false;
      }
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .item {
    width: 31%;
    height: 48%;
    float: left;
    margin: 0 0 1% 1.7%;
    background: rgba(9, 59, 118, 0.9);
    box-shadow: 0 0 7px #ccffff;
  }
}
</style>
<style lang="scss">
.dialogBox {
  .el-table {
    max-height: 50vh !important;
    padding: 0px;
    margin-top: 13px;
    background: rgb(15 47 86 / 70%) !important;
    overflow: auto;
  }
  .el-table__body tr.current-row > td {
    background: rgb(15 47 86 / 70%) !important;
    // background-color: #19204e !important;
  }
  .el-form {
    padding: 10px 12px;
    background: rgb(15 47 86 / 70%) !important;
  }
  .el-form-item {
    margin-bottom: 3px !important;
  }
  .el-radio__inner,
  .el-checkbox__inner {
    border: 1px solid #1890ff;
  }
  .el-radio__input.is-checked,
  .el-checkbox__input.is-checked {
    .el-radio__inner,
    .el-checkbox__inner {
      background: #1890ff;
    }
  }
}
</style>
